<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>投票方式问卷调查</title>
    <script src="static/vue.js"></script>
    <script src="static/tpbase.js"></script>
    <link rel="stylesheet" href="static/tpbase.css">
    <style>
        span {
            display: inline-block;
        }
        .content{
            width: 100%;
        }
        .content1{
            width: 100%;
            height: 3.1rem;
            margin-top: .36rem;
            background-color: white;
            box-shadow: 0px 0px 6px 0px rgba(170, 170, 170, 1);
        }
        .content2{
            width: 100%;
            height: 4.2rem;
            margin-top: .36rem;
            background-color: white;
            box-shadow: 0px 0px 6px 0px rgba(170, 170, 170, 1);
        }
        .c1top{
            padding-top: .2rem;
        }
        .c1top span:nth-child(1) {
            width: .4rem;
            height: .4rem;
            margin-left: .3rem;
            line-height: .4rem;
            border-radius: 50%;
            background-color: rgba(43, 117, 242, 1);
            color: #FFffff;
            font-size: .28rem;
            text-align: center;
            font-family: Roboto;
        }

        .c1top span:nth-child(2) {
            margin-left: .1rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }
        .c1bottom{
            margin: .14rem 0 0 .8rem;
            display: flex;
        }
        .labels{
            width: .38rem;
            height: .38rem;
            margin-right: .1rem;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }
        .labels2{
            width: .38rem;
            height: .38rem;
            margin-right: .1rem;
            border: 1px solid #cccccc;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            opacity: 0;
            margin-right: .1rem;
        }
        .c1d{
            margin-right: .25rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <div class="head">
            <span class="back">×</span><span class="menu">···</span>
        </div>
        <div class="titles">
            <div class="title1">
                {{title}}
            </div>
            <div class="title2">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content1" v-for="(item,index) in list">
            <div class="c1top">
                <span>{{item.num}}</span><span>{{item.name}}</span>
            </div>
            <div class="c1bottom" v-for="(item1,index1) in item.list1">
                <label class="labels" :class="{labelsc:item1.select}"
                       @click="selects(index,index1)">
                    <input class="inp" type="radio" :name="item1.names">
                </label>
                <div class="c1d">{{item1.name}}</div>
            </div>
        </div>

        <div class="content2" v-for="(item2,index2) in list2">
            <div class="c1top">
                <span>{{item2.num}}</span><span>{{item2.name}}</span>
            </div>
            <div class="c1bottom" v-for="(item3,index3) in item2.list3">
                <label class="labels2" :class="{labelsc:item3.select2}"
                       @click="selects2(index2,index3)">
                    <input class="inp" type="checkbox" :name="item3.names">
                </label>
                <div class="c1d">{{item3.name}}</div>
            </div>
        </div>
    </div>
    <div class="bottom">提交</div>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        select:false,
        select2:false,
        data:{
            title:"投票方式问卷调查",
            list:[//单选
                {
                    num:"1",
                    name:"您的职业是",
                    list1:[//选项4个
                        {names:"1", name:"教师", select:false},
                        {names:"1", name:"学生", select:false},
                        {names:"1", name:"上班族", select:false},
                        {names:"1", name:"其他", select:false},
                    ]
                }
            ],
            list2:[//多选
                {
                    num:"2",
                    name:"您觉得投票时需要注意哪些因素",
                    list3:[//选项6个
                        {names:"2", name:"保密性", select2:false},
                        {names:"2", name:"时效性", select2:false},
                        {names:"2", name:"公平性", select2:false},
                        {names:"2", name:"广泛性", select2:false},
                        {names:"2", name:"客观性", select2:false},
                        {names:"2", name:"准确性", select2:false},
                    ]
                }
            ]
        },
        methods:{
            selects(index,index1){
                for (var i=0;i<this.list[index].list1.length;i++){
                    if (i==index1){
                        this.list[index].list1[i].select=true;
                    }
                    else {
                        this.list[index].list1[i].select=false;
                    }
                }
            },
            selects2(index2,index3){
                this.list2[index2].list3[index3].select2=!this.list2[index2].list3[index3].select2
            }
        }
    });
</script>
</body>
</html>